import React, { memo, useEffect } from 'react'
import type { ReactNode } from 'react'
import { fetchBannerDataAction,fetchHotRecommendAction,fetchNewAlbumAction,fetchArtistListAction,fetchRankingDataAction } from './store/recommend'

import { useAppDispatch } from '@/store'
import Banner from './c-pages/Banner'
import HotRecommend from './c-pages/HotRecommend'
import NewAlbum from './c-pages/NewAlbum'
import { RecommendWrapper, RecommendSection, RecommendLeft, RecommendRight } from './style'
import VIPArea from './c-pages/VIPArea'
import ResidentSinger from './c-pages/ResidentSinger'
import HotAnchor from './c-pages/HotAnchor'
import RankingList from './c-pages/RankingList'


interface IProps {
  children?: ReactNode
}

const Recommend: React.FC<IProps> = () => {

  const dispatch = useAppDispatch()
  useEffect(() => {
    dispatch(fetchBannerDataAction())
    dispatch(fetchHotRecommendAction())
    dispatch(fetchNewAlbumAction())
    dispatch(fetchArtistListAction()),
    dispatch(fetchRankingDataAction())
  }, [])
  return (
/*     <div>
    <Banner></Banner>
    </div> */
      <RecommendWrapper>
      <Banner />
      <RecommendSection className="wrap-v2">
        <RecommendLeft>
          <HotRecommend />
          <NewAlbum />
          <RankingList />
        </RecommendLeft>
        <RecommendRight>
          <VIPArea />
          <ResidentSinger />
          <HotAnchor />
        </RecommendRight>
      </RecommendSection>
    </RecommendWrapper>
  )
}

export default memo(Recommend)
